<template>
    <div class="detail-table">
        <el-table
            :data="tableData"
            style="width: 100%"
            header-cell-class-name="header-cell"
            cell-class-name="detail-cell"
        >
            <el-table-column
                v-for="item in tableConfig"
                :key="item.field"
                :prop="item.field"
                :label="item.title"
            >
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    name: 'DetailTable',
    props: {
        tableConfig: Array,
        tableData: Array
    }
}
</script>
<style scoped lang="scss">
::v-deep .el-table {
    .header-cell {
        padding: 0;
        border: 1px solid #AAAAAA;
        opacity: 0.33;

        .cell {
            padding: 6px 10px 4px;
            background: #EEEEEE;
            height: 50px;
            line-height: 40px;
            font-size: 16px;
            text-align: center;
        }
    }
    .detail-cell {
        height: 50px;
        padding: 16px 0 18px;
        border: 1px solid #AAAAAA;
        opacity: 0.53;

        .cell {
            text-align: center;
            line-height: 16px;
            font-weight: 500;
            font-size: 16px;
            color: #272727;
        }
    }
}
</style>